<template>
  <a-layout>
    <a-layout-header class="bg-white admin-content-header">
      <div class="col-4 admin-tiao-left">
        <span>{{ $route.name }}</span>
      </div>
      <div class="col-8 text-right">
        <el-button type="primary" @click="addto()" plain>生成序列号</el-button>
        <el-input class="col-sm-3 data-input" type="number" v-model="message" />
        <el-button
          class="small"
          type="warning"
          @click="addtocode(sels)"
          :disabled="this.sels.length === 0"
          style="margin-right: 5px;"
        >生成二维码</el-button>
        <a target="_blank" href="/admin.html#/newspackage">
          <el-button type="warning">打印二维码操作流程</el-button>
        </a>
        <el-input class="col-sm-3 phoneinput phoneinput" placeholder="请输入要查询的用户ID" v-model="search"></el-input>
      </div>

      <el-dialog title="修改序列号状态" :visible.sync="dialogupdata">
        <el-form ref="filed" :model="form" label-width="82px">
          <el-form-item label="序列号">
            <el-input v-model="form.ID"></el-input>
          </el-form-item>
          <el-form-item label="序列号状态">
            <el-input v-model="form.state"></el-input>
          </el-form-item>
          <el-form-item label="用户id">
            <el-input v-model="form.uid"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogupdata = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit(form)">确 定</el-button>
        </div>
      </el-dialog>
    </a-layout-header>
    <a-layout-content class="admin-content-table">
      <el-table height="100%" :data="tableDate" @selection-change="handleSelectionChange" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="ID" label="序列号" width="500"></el-table-column>
        <el-table-column prop="uid" label="用户id" width="100"></el-table-column>
        <el-table-column prop="passwordgroupid" label="口令组ID" width="150"></el-table-column>
        <el-table-column prop="state" sortable label="状态" width="120">
          <template slot-scope="scope">{{state[scope.row.state?scope.row.state:0]}}</template>
        </el-table-column>
        <el-table-column prop="created_at" label="开始" width="300">
          <template slot-scope="scope">{{gettime(scope.row.created_at)}}</template>
        </el-table-column>
        <el-table-column prop="updated_at" label="更新" width="200">
          <template slot-scope="scope">{{gettime(scope.row.updated_at)}}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="230">
          <template slot-scope="scope">
            <el-button @click="upRow(scope.row)" type="text" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </a-layout-content>
    <adminContentFooter
      v-bind="{handleSizeChange, handleCurrentChange, currentPage, pagesize,data: searchDate}"
    ></adminContentFooter>
  </a-layout>
</template>
<script>
import {
  asyncupdatepasswordid,
  asynccreatepassword,
  asyncgetpasswordbygroupid
} from "../../../plugins/api.js";
import { mapGetters } from "vuex";
import { gettime } from "../../../plugins/utils";
import adminContentFooter from "../../../components/admin/admin-content-footer";

export default {
  components: {
    adminContentFooter
  },
  data() {
    return {
      message: 0,
      filed: [],
      sels: [], //选中显示的值
      currentPage: 1,
      pagesize: 20,
      search: "",
      dialogupdata: false,
      state: ["初始化", "课程提交中", "提交成功"],
      form: {}
    };
  },
  computed: {
    ...mapGetters(["getCourse", "getCatebag", "getCoursecatebag"]),
    ID() {
      return this.$route.query.ID;
    },
    tableDate() {
      const { currentPage, pagesize, searchDate } = this;
      return searchDate.slice(
        (currentPage - 1) * pagesize,
        currentPage * pagesize
      );
    },
    searchDate() {
      const { search, filed } = this;
      return filed.filter(data => !search || String(data.uid).includes(search));
    }
  },
  watch: {
    $route() {
      this.start();
    }
  },
  async mounted() {
    this.start();
  },
  methods: {
    gettime,
    async onSubmit(item) {
      try {
        await asyncupdatepasswordid({
          ID: item.ID,
          state: item.state,
          uid: item.uid
        });
        this.start();
        this.$message({
          message: "恭喜你，修改成功",
          type: "success"
        });
        this.dialogupdata = false;
      } catch (err) {
        this.$message.error("错了哦，修改失败:" + err);
      }
    },
    upRow(i) {
      this.form = i;
      this.dialogupdata = true;
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleSelectionChange(val) {
      this.sels = val;
    },
    async start() {
      let id = this.ID;
      this.filed = await asyncgetpasswordbygroupid({ passwordgroupid: id });
    },
    async addto() {
      await asynccreatepassword({
        passwordgroupid: this.ID,
        count: this.message
      });
      this.start();
    },
    addtocode(i) {
      this.sels = i;
      const add = [];
      for (var a = 0; a < i.length; a++) {
        const num = this.sels[a].ID;
        add.push(num);
      }
      window.open(
        "https://cdn.hterobot.com/vue/public/html/qrcode.html?state," + add,
        "_blank"
      );
    }
  }
};
</script>    
<style scoped>
.hidden {
  display: none;
}
.phonequery::after {
  content: "";
  clear: both;
  display: inline-block;
}
.phonequery {
  display: flex;
}
</style>